<template>
  <!--
      	作者：luoyiming
      	时间：2020-06-01
      	描述：广告-列表
      -->
  <div>
    <div class="common-seach-wrap">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键词">
          <el-input v-model="formInline.keywords" placeholder="名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="添加时间">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              size="small"
              v-model="formInline.create_time"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item> -->
        <el-form-item label="状态">
          <el-select size="small" v-model="formInline.is_audit" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待审核" value="0"></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区域">
        <el-select  v-model="formInline.province_id" placeholder="省" @change="initCity" clearable>
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
        </el-select>
        <el-select  v-if="formInline.province_id!=''" v-model="formInline.city_id" placeholder="市" @change="initRegion" clearable>
          <el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[formInline.province_id]['city']"
                     :key='index1'></el-option>
        </el-select>
        <!-- <el-select  v-if="formInline.city_id!=''" v-model="formInline.region_id" placeholder="区" clearable>
          <el-option :label="item2.name" :value="item2.id"
                     v-for="(item2,index2) in areaList[formInline.province_id]['city'][formInline.city_id]['region']"
                     :key='index2'></el-option>
        </el-select> -->
      </el-form-item>

      <el-form-item label="">
          <el-input
            v-model="formInline.search"
            placeholder="请输入商户名称"
          ></el-input>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="poster_id" label="ID" width="100"></el-table-column>
        <el-table-column label="代理/商户" width="180">
          <template slot-scope="scope">
            <div class="product-info" v-if="scope.row.shop_supplier_id>0">
              <strong class="orange">商户：{{ scope.row.supplier.name }}</strong>
            </div>
            <div class="product-info" v-if="scope.row.shop_supplier_id==0">
              <span class="green">代理：{{ scope.row.proxy_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="store_name" label="门店" >
          <template slot-scope="scope">
          <p v-for="item in scope.row.store_name">{{ item }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="city_name" label="地区" width="200"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="bg_image_id" label="海报" width="250">
          <template slot-scope="scope">
            <el-image v-if="scope.row.bg_image" :src="scope.row.bg_image.file_path"
                      width="50" height="50" :preview-src-list="[scope.row.bg_image.file_path]"/>
          </template>
        </el-table-column>
        <el-table-column prop="status_text" label="审核" width="120">
          <template slot-scope="scope">
            <p :class="['audit-'+scope.row.is_audit]" @click="auditHandle(scope.row)">{{
                scope.row.is_audit == 0 ? '待审核' : (scope.row.is_audit == 1 ? '通过' : '不通过')
              }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="status_text" label="发布状态" width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.is_audit==0" style="color:#C0C4CC">未审核</p>
            <p v-else-if="scope.row.is_audit==2" style="color:red;">审核不通过</p>
            <p v-else-if="scope.row.publish_status==1">已发布</p>
            <p v-else style="color:red;">未发布</p>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="140"></el-table-column>
        <el-table-column prop="update_time" label="更新时间" width="140"></el-table-column>
        <el-table-column prop="name" label="操作" width="90">
          <template slot-scope="scope">
            <el-button @click="auditHandle(scope.row)" type="text" size="small" v-if="scope.row.is_audit==0">审核</el-button>
            <el-button @click="deleteOfficer(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="pagination">
        <el-pagination background :current-page="curPage" :page-size="pageSize"
                       layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      </div>
    </div>
    <audit pk="poster_id" title="招聘海报审核" :open="auditOpen" @close="closeAudit" :form="auditRow" :AuditApi="EmployApi"></audit>
  </div>
</template>

<script>
import * as EmployApi from '@/api/employ.js';
import Audit from "@/components/Audit.vue";
import DataApi from '@/api/data.js';
export default {
  components: {Audit},
  data() {
    return {
      /*分类*/
      categoryData: [],
      /*表单数据*/
      tableData: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
      commentData: [],
      loading: true,
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      auditOpen: false,
      auditRow: {},
      EmployApi,
      formInline:{
        keywords:'',
        search:'',
        province_id: '',
        city_id: '',
        region_id:''
      },
      areaList: [],
    };
  },
  created() {
    /*获取广告列表*/
    this.getTableList();
    this.getRegion()
  },
  methods: {
      /*初始化城市id*/
      initProvince() {
      this.formInline.province_id = ''
    },

    /*初始化城市id*/
    initCity() {
      this.formInline.city_id = ''
    },
    /*初始化区id*/
    initRegion() {
      this.formInline.region_id = ''
    },

    getRegion(){
        let self = this;
        DataApi.getRegion({}, true)
          .then(res => {
            self.areaList = res.data.regionData;
          })
          .catch(error => {

          });
    },

    /*获取广告列表*/
    getTableList() {
      let self = this;
      let Params = this.formInline;
      Params.page = self.curPage;
      this.loading = true;
      EmployApi.posterList(Params, true)
        .then(data => {
          self.loading = false;
          self.tableData = data.data.list.data;
          self.totalDataNumber = data.data.list.total;
        })
        .catch(error => {
          self.loading = false;
        });
    },

    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getData();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.getData();
    },

    /*删除广告*/
    deleteOfficer(row) {
      let self = this;
      self
        .$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          self.loading = true;
          EmployApi.deletePoster(
            {
              poster_id: row.poster_id
            },
            true
          )
            .then(data => {
              self.$message({
                message: data.msg,
                type: 'success'
              });
              self.loading = false;
              self.getTableList();
            })
            .catch(error => {
            });
        })
        .catch(() => {
        });
    },


    handleClick(tab, event) {
    },


    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (f == 'add') {
        this.open_add = e.openDialog;
        if (e.type == 'success') {
          this.getTableList();
        }
      }
      if (f == 'edit') {
        this.open_edit = e.openDialog;
        if (e.type == 'success') {
          this.getTableList();
        }
      }
    },
    auditHandle(row) {
      if (row.is_audit == 1) return true;
      this.auditRow = row;
      this.auditOpen = true;
    },
    closeAudit(value) {
      this.auditOpen = false;
      this.getTableList()
    },
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    },
  }
};
</script>

<style>
.audit-0 {
  color: rgb(192, 196, 204);
  cursor: pointer;
}

.audit-1 {
  color: green;
}

.audit-2 {
  color: red;
  cursor: pointer;
}
</style>
